<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
      *{margin:0;padding:0;}
      #tem{
        display:none;
      }
      .edit span:hover{color:#f00;}
      .edit span{
        cursor:pointer;
      }
      .mask{
        position:absolute;
        width:100%;
        background-color:rgba(0,0,0,0.3);
        top:0;
        left:0;
		height:100%;
		display:none;
      }
      .popup{
        background-color:#fff;
        padding:10px;
        display:none;
        position:absolute;
        width:500px;
        height:200px;
        z-index: 2;
        left:50%;
        top:50%;
		transform:translate(-50%,-50%);
      }
      .killMargin{
        overflow:hidden;
      }
	  .table th,.table td{
		  height:42px;
		  line-height:42px;
	  }
    </style>
</head>
<body>
	<h3>XI'AN XIANYANG INT'L AIRPORT (陕西 西安 CN) ZLXY / XIY 离港 </h3>
	<hr>
	<table class="table">
		<thead>
		  <tr>
			<th width="10%">标识符</th>
			<th width="10%">机型</th>
			<th width="20%">目的地</th>
			<th width="20%">出发</th>
			<th width="20%">到达</th>
			<th width="10%">操作</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<td>AAR348</td>
				  <td>A321</td>
				  <td>Incheon Int'l (ICN)</td>
				  <td>15:10 CST</td>
				  <td>18:14 KST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
		  </tr>
		  <tr>
				  <td>FZA6695</td>
				  <td>B738</td>
				  <td>Quanzhou Jinjiang (JJN)</td>
				  <td>15:05 CST</td>
				  <td>17:45 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CHH7509</td>
				  <td>B738</td>
				  <td>Fuzhou Changle Int'l (FOC)</td>
				  <td>  15:00 CST</td>
				  <td>17:28 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>OKA2885</td>
				  <td>B738</td>
				  <td>Urumqi Diwopu Int'l (URC)</td>
				  <td>  14:54 CST</td>
				  <td>18:29 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2321</td>
				  <td>A319</td>
				  <td>Karamay (KRY)</td>
				  <td>  14:51 CST</td>
				  <td>18:26 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr>
				  <td>CES2259</td>
				  <td>A320</td>
				  <td>Lüliang (LLV)</td>
				  <td>  14:44 CST</td>
				  <td>15:31 CST</td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
				<tr id="tem">
				  <td></td>
				  <td></td>
				  <td></td>
				  <td></td>
				  <td></td>
				  <td class="edit">
					  <span class="insertData">插入</span>
					  <span class="delete">删除</span>
				  </td>
				</tr>
		</tbody>
		</table>
	</div>
	
	<div class="popup">
		<button class="btn btn-primary" id="confirm">确定</button>
		<button id="cancel" class="btn">取消</button>
	</div>
	
	<div class="mask"></div>
  
  
  <script src="machine.js"></script>
  <script>
	  
	  var tbody = $(".table tbody");
	  var template = $("#tem");
	  var mask = $(".mask");
	  var popup = $(".popup");
	  var confirmBtn = $("#confirm");
	  var cancelBtn = $("#cancel");
	  
	  
	  cancelBtn.onclick = function(){
		  mask.style.display = "none";
		  popup.style.display = "none";
	  }
	  
	  
	  
	  
	  tbody.onclick = function(e){
		  var _this = e.target;
		  var _thisTr = _this.parentNode.parentNode;
		  
		  // 点到插入按钮了
		  if(_this.className === "insertData"){
			  var newTr = template.cloneNode(true);
			  newTr.setAttribute("id","");
			  
			  appendAfter(newTr,_thisTr)
		  }
		  
		  // 点到删除按钮了
		  if(_this.className === "delete"){
			  
			  mask.style.display = "block";
			  popup.style.display = "block";
			  
			  popup.style.left = ($("body").offsetWidth / 2 - popup.offsetWidth/2) + "px";
			  popup.style.top = (document.documentElement.clientHeight / 2 - popup.offsetHeight/2) + "px";
			  
			  confirmBtn.onclick = function(){
				mask.style.display = "none";
				popup.style.display = "none";
				
				remove(_thisTr)
			  }
			  
			  
		  }
		  
		  
		  // 可被编辑的单元格
		  if(_this.tagName == "TD" && _this.className == ""){
			  var txt = _this.innerHTML;
			  var input = document.createElement("input");
			  input.value =  txt;
			  _this.innerHTML = "";
			  _this.appendChild(input);
			  input.focus();
			  
			  
			  input.onblur = function(){
				  _this.innerHTML = this.value;
			  }
		  }
		  
		  
		  
	  }
  </script>
</body>
</html>